<template>
  <div id="header" class="navbar-fixed-top">
    <div class="container">
      <h1 class="logo" style="color: whitesmoke; font-size: 50px" @click="this.$router.push('/')">crabin博客</h1>
      <div role="navigation" class="site-nav  primary-menu">
        <div class="menu-fix-box">
          <ul id="menu-navigation" class="menu">
            <li class="current-menu-ancestor"><a href="#">首页</a></li>
            <li><a href="#">网站建设</a></li>
            <li class="menu-item-has-children"><a>博客日记</a>
              <ul class="sub-menu">
                <li><a href="#">个人日记</a></li>
                <li><a href="#">个人笔记</a></li>
                <li><a href="#">心情说说</a></li>
                <li><a href="#">生活随笔</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="right-nav pull-right">
        <div class="js-toggle-message hidden-xs">
          <button id="sitemessage" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
              class="icon-megaphone"></i></button>
          <div class="dropdown-menu" role="menu" aria-labelledby="sitemessage">
            <ul>
              <li class="first"><span class="time">15.10.25</span><a target="_blank" href="#">WordPress免费中文博客主题</a>
              </li>
              <li><span class="time">15.10.19</span><a target="_blank" href="#">极简WordPress个人博客主题</a></li>
              <li><span class="time">15.10.18</span><a target="_blank" href="#">Module 模块化多功能WordPress企业主题</a></li>
              <li><span class="time">15.10.17</span><a target="_blank" href="#">Magneto响应WordPress杂志和博客主题</a></li>
              <li><span class="time">15.10.15</span><a target="_blank" href="#">mawiss WordPress博客杂志的主题</a></li>
            </ul>
            <div class="more-messages"><a href="#">更多</a></div>
          </div>
        </div>
        <button class="js-toggle-search"><i class="icon-search"></i></button>
        <a @click="creatBlogs()" class="toggle-tougao  hidden-xs"><i class="icon-feather"></i>创作</a>

        <img alt='{{user.username}}' :src="user.avatar" height='50' width='50' v-if="this.token"
             style="border-radius: 15px;"/>
        <span class="line  hidden-xs" v-if="this.token"></span>
        <a @click="logout" class="toggle-login hidden-xs" v-if="this.token">注销</a>

        <a @click="this.$router.push({name : 'login'});" class="toggle-login hidden-xs"
           v-if="!this.token">登录</a>
        <span class="line  hidden-xs" v-if="!this.token"></span> <a @click="this.$router.replace('/register');"
                                                                    class="toggle-login hidden-xs"
                                                                    v-if="!this.token">注册</a>

      </div>

    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import {getRequest} from "@/utils/api";

export default {
  name: "head-item",
  data() {
    return {
      token: '',
      user: {},
      confirmLogout: false,
    }
  },
  methods: {
    creatBlogs() {
      let token = window.sessionStorage.getItem("token")
      if (token) {
        this.$router.push({name: 'newBlog'});
      } else {
        ElMessage.error({message: "请先登录，将自动跳转"});
        this.$router.replace('/login')
      }
    },
    checkLogin() {
      if (window.sessionStorage.getItem("token") && window.sessionStorage.getItem("user")) {
        this.token = window.sessionStorage.getItem("token")
        this.user = JSON.parse(window.sessionStorage.getItem("user"))
      }
    },
    logout() {
      getRequest('/logout').then(resp => {
        if (resp) {
          this.token = ''
          this.user = {}
          window.sessionStorage.removeItem('user')
          window.sessionStorage.removeItem('token')
          this.$router.replace('/')
        }
      })

    }
  },
  mounted() {
    this.checkLogin()
  }

}
</script>

<style scoped>

#header, #header .toggle-tougao, .two-s-footer .footer-box {
  background-color: #000000;
}

#header .primary-menu ul > li > a, #menu-mobile a, #header .js-toggle-message button, #header .js-toggle-search, #header .toggle-login, #header .toggle-tougao {
  color: #bdbdbd;
}

.navbar-toggle .icon-bar {
  background-color: #bdbdbd;
}

#header .primary-menu ul > li.current-menu-item > a, #header .primary-menu ul > li.menu-item-has-children:hover > a, #header .primary-menu ul > li.current-menu-ancestor > a, #header .primary-menu ul > li > a:hover {
  color: #FFF;
}

#header .toggle-tougao:hover, #header .primary-menu ul > li .sub-menu li a:hover, #header .primary-menu ul > li .sub-menu li.menu-item-has-children:hover > a, #header .primary-menu ul > li .sub-menu li.current-menu-item > a {
  color: #000;
}

#header .toggle-tougao, #header .toggle-tougao:hover {
  border-color: #bdbdbd;
}

#header .toggle-tougao:hover {
  background-color: #FFF;
}

</style>